<style lang="less" scoped>
  .page__wrapper {
    width: 100%;
    height: 100%;

    .page__title {
      text-align: center;
      font-weight: bolder;
    }
  }
</style>
<template>
  <div class="page__wrapper">
    <simple-table :pageable="false" :table-column="tableColumn" :table-data="tableData">
      <template slot="searchSection">
        <div class="page__title">厂办大集体信息报送表</div>
        <simple-form v-model="searchModel" :form-field="searchFormField">
          <template slot="tableOperation">
            <el-button type="primary">{{$t('operation.exportExcel')}}</el-button>
            <el-button type="primary">{{$t('operation.exportPDF')}}</el-button>
          </template>
        </simple-form>
      </template>
    </simple-table>
  </div>
</template>
<script>
const BASEURL = {
  list: '/api/business/balancesheet/demoBalanceSheet/report',
  export: '/api/business/balancesheet/demoBalanceSheet/report/export',

  office: '/api/system/office/list'
}

export default {
  name: 'outer_changban_report',
  components: {},
  data () {
    return {
      searchModel: { a: '2018年12月' },
      /** 表格数据 */
      tableData: [],
      companyLoadingFlag: false,
      companyList: []
    }
  },
  computed: {
    searchFormField () {
      return [
        { prop: 'a', label: this.$t('pushtable_inner.unlistedcustody.a'), type: 'Input', viewFlag: true },
        { slotName: 'tableOperation', col: { xs: 12, sm: 16, md: 18, style: { textAlign: 'right' } }, labelWidth: '0' }
      ]
    },
    tableColumn () {
      return [
        { label: this.$t('pushtable_outer.factorycollective.companyName'), prop: 'companyName', width: 180 },
        {
          label: this.$t('pushtable_outer.factorycollective.aaa'),
          children: [
            { label: this.$t('pushtable_outer.factorycollective.b'), prop: 'b', width: 120 },
            { label: this.$t('pushtable_outer.factorycollective.c'), prop: 'c', width: 120 },
            { label: this.$t('pushtable_outer.factorycollective.d'), prop: 'd', width: 150 }
          ]
        },
        {
          label: this.$t('pushtable_outer.factorycollective.bbb'),
          children: [
            { label: this.$t('pushtable_outer.factorycollective.e'), prop: 'e', width: 100 },
            { label: this.$t('pushtable_outer.factorycollective.f'), prop: 'f', width: 100 },
            { label: this.$t('pushtable_outer.factorycollective.g'), prop: 'g', width: 100 }
          ]
        },
        {
          label: this.$t('pushtable_outer.factorycollective.ccc'),
          children: [
            { label: this.$t('pushtable_outer.factorycollective.h'), prop: 'h', width: 120 },
            { label: this.$t('pushtable_outer.factorycollective.i'), prop: 'i', width: 120 }
          ]
        },
        {
          label: this.$t('pushtable_outer.factorycollective.ddd'),
          children: [
            { label: this.$t('pushtable_outer.factorycollective.j'), prop: 'j', width: 120 },
            { label: this.$t('pushtable_outer.factorycollective.k'), prop: 'k', width: 120 }
          ]
        }
      ]
    },
    quarter () {
      return this.$getDictList('quarter')
    }
  },
  methods: {
    handleDataSearch () {
      // let searchFilter = Object.assign({}, { page: this.tablePageInfo }, this.searchModel)
      // let loadingFlag = this.$loading({ fullscreen: false, target: this.$el, text: this.$t('tip.systemLoading') })
      // this.$axios
      //   .post(BASEURL.list, searchFilter)
      //   .then(resp => {
      //     let respData = resp.data
      //     this.tableData = respData.page.list
      //     this.tablePageInfo = { pageNo: respData.page.pageNo, pageSize: respData.page.pageSize }
      //     this.tableDataTotalCount = respData.page.count
      //   })
      //   .finally(() => {
      //     loadingFlag.close()
      //   })
      this.tableData = [
        { companyName: '大港油田集团有限公司', b: 53, c: 27, d: 6, e: 3389, f: 2112, g: 1277, h: 2112, i: 112, j: 7314, k: 1246 },
        { companyName: '吉林石化', b: 47, c: 33, d: 8, e: 2710, f: 1789, g: 921, h: 1789, i: 362, j: 4521, k: 987 }
      ]
    },

    getCompanyList (name) {
      this.companyLoadingFlag = true
      this.$axios.post(BASEURL.office, { level: this.$store.state.app.userInfo.company.level + 1 })
        .then(resp => {
          let respData = resp.data
          this.companyList = respData.list.map(item => { return { key: item.id, value: item, label: item.name } })
        })
        .finally(() => { this.companyLoadingFlag = false })
    }
  },
  mounted () {
    this.handleDataSearch()
  }
}
</script>
